<template>
  <footer class="footer" v-show='list.length'>
    <span class="todo-count" v-show="residuetask"><strong>{{ residuetask }}</strong
      >剩余</span
    >
    <ul class="filters">
      <li>
        <a :class="{selected : num === 1}" href="#/" @click="alter(1)">全部</a>
      </li>
      <li>
        <a href="#/active" :class="{selected : num === 2}" @click="alter(2)">进行中</a>
      </li>
      <li>
        <a href="#/completed" :class="{selected : num === 3}" @click="alter(3)">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="eliminate" v-show="eliminatestyle">清除已完成</button>
  </footer>
</template>

<script>
export default {
  name: 'MyFoot',
  props: {
    list: {
      type: Array
    },
    num :{
      type : Number
    }
  },
  methods: {
    alter (num) {
      this.$emit('alter' ,num)
    },
    eliminate(){
      this.$emit('eliminate')
    }
  },
  computed: {
    residuetask () {
      return this.list.filter(item => !item.state).length
    },
    eliminatestyle(){
      return this.list.some(item => item.state)
    }
  }
}
</script>

<style scoped lang="less"></style>
